<template>
	<el-dialog title="下载审批" :visible.sync="visible" width="560px">
		<el-form ref="form" size="medium" :model="auditForm" :rules="auditRules" label-width="80px" style="width: 100%">
			<el-form-item label="审批状态" prop="auditStatus">
				<el-radio-group v-model="auditForm.auditStatus" :aria-hidden="false">
					<el-radio label="2">同意</el-radio>
					<el-radio label="3">驳回</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="审批意见" prop="auditDesc">
				<el-input type="textarea" v-model="auditForm.auditDesc" resize="vertical" :autosize="{ minRows: 4, maxRows: 8 }" placeholder="输入审批意见"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleConfirmData()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: { type: Boolean, default: false },
		dataId: { type: String, default: '' }
	},
	data() {
		return {
			visible: this.value,
			auditForm: {},
			auditRules: {
				auditStatus: { required: true, message: '请选择审批状态', trigger: 'change' }
			}
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.$nextTick(() => {
				this.$refs['form'].clearValidate();
			});
		},
		'auditForm.auditStatus': {
			handler(val) {
				if (val === '2') {
					this.$delete(this.auditRules, 'auditDesc');
				} else if (val === '3') {
					this.$set(this.auditRules, 'auditDesc', {
						required: true,
						message: '请输入审批意见',
						trigger: 'blur'
					});
					this.$delete(this.auditForm, 'auditDesc');
				}
				this.$nextTick(() => {
					this.$refs['form'].clearValidate();
				});
			}
		}
	},
	methods: {
		handleConfirmData() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				console.log('123123123');
			});
		}
	}
};
</script>

<style scoped></style>
